<template>
    <div class="editor-prompt">
        <editor-title title="歌曲名称" required />

        <el-input
            v-model="value"
            class="custom-input"
            size="large"
            placeholder="给你的歌曲起个好听的名字"
        />
    </div>
</template>

<script lang="ts" setup>
import { useVModels } from '@vueuse/core'
import editorTitle from './editor-title.vue'

const emits = defineEmits<{
    (event: 'update:modelValue', value: string): void
}>()

const props = withDefaults(
    defineProps<{
        modelValue?: string
    }>(),
    {}
)

const { modelValue: value } = useVModels(props, emits)
</script>

<style lang="scss" scoped>
.custom-input {
    width: 100%;
    :deep() {
        .el-input__wrapper {
            background-color: var(--el-bg-color-page);
            &:not(.is-focus) {
                box-shadow: none;
            }
        }
    }
}
</style>
